<template>
  <div class="problemList">
    <div class="p-header">
      <div class="p-h-title"><i class="iconfont icon-shezhi1"></i>系统设置</div>
    </div>
    <div class="p-body">
      <div class="items">
        <div class="item">
          <div class="text">是否允许用户注册</div>
          <el-switch class="inp" v-model="state.userRigestry" @change="updateUserRegistry()"></el-switch>
        </div>
        <div class="item">
          <div class="text">是否允许用户修改学校相关信息</div>
          <el-switch class="inp" v-model="state.updateUserMsg" @change="setSettingUser()"></el-switch>
        </div>
        <div class="item">
          <div class="text">系统主色</div>
          <el-color-picker class="el-color-picker" v-model="state.color" show-alpha :predefine="predefineColors"
            @change="updateColor()" />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { setSettingRegistryAPI, getSettingRegistryAPI, setSettingUserAPI, setSettingColorAPI, getSettingUserAPI, getSettingColorAPI } from './api'
import { onBeforeMount, onMounted, reactive, ref } from 'vue'

const state = reactive({
  userRigestry: undefined,
  updateUserMsg: undefined,
  color: ''
})

const updateUserRegistry = () => {
  setSettingRegistryAPI(state.userRigestry).then(res => {
    ElMessage.success('更新成功')
  })
}
const getUserRegistry = () => {
  getSettingRegistryAPI().then(res => {
    if (res.data.code === 200) {
      state.userRigestry = res.data.data
    }
  })
}

const predefineColors = ref([
  'rgb(245, 235, 217)',
  'rgb(217, 245, 243)',
  'rgb(229, 217, 245)',
  'rgb(245, 217, 235)',
  'rgb(217, 238, 245)',
  'rgb(243, 245, 217)',
  'rgb(245, 227, 217)',
  'rgb(245, 221, 217)',
  'rgb(217, 219, 245)',
  'rgb(228, 245, 217)'
])

const updateColor = () => {
  setSettingColorAPI(state.color).then(res => {
    ElMessage.success('更新成功')
  })
}
const getColor = () => {
  getSettingColorAPI().then(res => {
    if (res.data.code === 200) {
      state.color = res.data.data
    }
  })
}


onBeforeMount(() => {
  getInitData()
  getColor()
})

const setSettingUser = () => {
  setSettingUserAPI(state.updateUserMsg).then(res => {
    ElMessage.success('更新成功')
  })
}

const getSettingUser = () => {
  getSettingUserAPI().then(res => {
    if (res.data.code === 200) {
      state.updateUserMsg = res.data.data
    }
  })
}

const getInitData = () => {
  Promise.all([getSettingUser(), getUserRegistry()]).then(res => {
    return res
  }).catch(err => {
    console.log("系统错误")
  })
}

</script>

<style lang="less" scoped>
.problemList {
  margin: auto;
  width: 96%;
  height: 92vh;
  padding: 10px;
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 12px 12px 50px #d9d9d9, -12px -12px 50px #ffffff;
  display: flex;
  flex-direction: column;
  margin-top: 10px;

  .p-header {
    display: flex;
    border-bottom: 2px solid @lineColor;
    padding-bottom: 10px;

    .p-h-title {
      height: 30px;
      line-height: 30px;
      font-size: 20px;
      font-weight: 600;
      color: #555;
      display: flex;
      text-align: center;

      .iconfont {
        margin: auto 0;
        font-weight: 700;
        font-size: 28px;
        height: 30px;
      }
    }
  }

  .p-body {
    width: 100%;

    .items {
      display: flex;
      flex-wrap: wrap;
      padding: 20px;

      .item {
        margin: 0 10px 10px 0;
        width: 30%;
        height: 80px;
        line-height: 80px;
        border-radius: 10px;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05), -2px -2px 5px rgba(0, 0, 0, 0.05);
        padding: 5px 14px;
        display: flex;
        justify-content: space-around;
        transition: 0.2s;

        &:hover {
          transform: scale(1.01);
        }

        .text {
          font-weight: 550;
        }

        ::v-deep(.el-color-picker) {
          display: flex;
          align-items: center;
        }

        .inp {
          margin: auto 0;
        }
      }
    }
  }

}
</style>
